<!--
 * @Author: Y先森
 * @Date: 2023-04-24 10:55:03
 * @LastEditors: y && 250048395@qq.com
 * @LastEditTime: 2023-05-09 15:44:18
 * @FilePath: \y-website\src\views\design\components\list\index.vue
-->
<template>
  <div>
    <m-infinite v-model="isLoading" :isFinished="isFinished" @onLoad="desiginList">
      <m-waterfall  class="w-full" :data="designList" nodeKey="id" :column="isMobileTerminal ? 2 : 5" :picturePreReading="false">
        <template v-slot="{ item, width }">
          <item-vue :data="item" :width="width" @click="onToPins"></item-vue>
        </template>
      </m-waterfall>
    </m-infinite>

    <!-- 详情内容展示 -->
    <transition :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <pins-vue v-if="isVisiblePins" :id="currentPins.id"></pins-vue>
    </transition>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import itemVue from './item.vue'
import { useStore } from 'vuex'
import { getDesiginList } from '@/api'
import { useEventListener } from '@vueuse/core'
import { isMobileTerminal } from '@/utils/flexible'
import gsap from 'gsap'
import pinsVue from '../../../pins/components/pins.vue'

/**
 * 构建数据请求
 */
let query = {
  page: 1,
  size: 5,
  categoryId: ''
}

const store = useStore()

// 数据是否加载中
const isLoading = ref(false)
// 数据是否全部加载完成
const isFinished = ref(false)
// 数据源
const designList = ref([])
/**
 * 数据加载事件
 */
const desiginList = async () => {
  // 如果数据全部加载完成 return
  if (isFinished.value) {
    return
  }
  // 完成了第一次请求之后，后续数据
  if (isFinished.value.length) {
    query.page += 1
  }
  // 触发接口
  const res = await getDesiginList(query)
  if (query.page === 1) {
    designList.value = res.list
  } else {
    designList.value.push(...res.list)
  }

  // 判断数据是否全部加载完成
  if (designList.value.length == res.total) {
    isFinished.value = true
  }
  isLoading.value = true
}

/**
 * 通过此方法修改 query 请求参数，重新发起请求
 */
const resetQuery = (newQuery) => {
  query = { ...query, ...newQuery }

  // 重置状态
  isFinished.value = false
  designList.value = []
}

/**
 * 监听 currentCategory 的变化
 */
watch(
  () => store.getters.currentDesignCategory,
  (currentDesignCategory) => {
    // 重置请求参数
    resetQuery({
      page: 1,
      categoryId: currentDesignCategory.id
    })
  }
)

// 首次加载
desiginList()

// 控制 pins 展示
const isVisiblePins = ref(false)
// 当前选中的 pins 属性
const currentPins = ref({})

/**
 * 进入图片详情
 */
const onToPins = (item)=> {
  history.pushState(null,null,`/pins/${item.id}`)
  isVisiblePins.value = true
  currentPins.value = item
}
/**
 * 监听浏览器后退按钮事件  1、window对象  2、popstate后退 3、回调事件
 */
 useEventListener(window, 'popstate', () => {
  isVisiblePins.value = false
})

/**
 * 进入动画开始前
 */
const beforeEnter = (el) => {
	gsap.set(el,{
  	scaleX:0,
  	scaleY:0,
  	transformOrigin:'0 0', // 中心点
  	translateX:currentPins.value.location?.translateX,  //位置X
  	translateY:currentPins.value.location?.translateY,  //位置Y
  })
}
/**
 * 进入动画执行中
 */
const enter = (el,done) => {
	gsap.to(el,{
  	duration:0.3,
  	scaleX:1,
  	scaleY:1,
  	translateX:0,
  	translateY:0,
  	onComplete:done
  })
}
/**
 * 离开动画执行中
 */
const leave = (el,done) => {
	gsap.to(el,{
  	duration:0.3,
  	scaleX:0,
  	scaleY:0,
  	translateX:currentPins.value.location?.translateX,
  	translateY:currentPins.value.location?.translateY,
  	onComplete:done
  })
}
</script>
<style scoped lang="scss"></style>
